<template>
  <div style="backgroundColor:#F1F1F1">
    <!-- 面包屑导航 -->
<!--    <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!--      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item>实时显示</el-breadcrumb-item>-->
<!--    </el-breadcrumb>-->
    <el-row class="custom-row" :gutter="20" style="background-color:#F1F1F1">
      <el-col class="custom-col" :span="3">
        <TrainList />
      </el-col>

      <el-col class="custom-col" :span="16">
        <TrainImage />
      </el-col>
      <el-col class="custom-col" :span="5">
        <CheckResult />
      </el-col>

    </el-row>
  </div>
</template>

<script>
import TrainImage from './components/trainImage'
import CheckResult from './components/checkResult'
import TrainList from './components/trainList'

export default {
  name: 'Index',
  components: { TrainImage, CheckResult, TrainList }

}
</script>

<style scoped>
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #007bff;
  color: #007bff;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 5px;
  transition: background-color 0.3s, border-color 0.3s;
}

.button-style:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #0056b3;
}

.button-style:active {
  background-color: #0056b3;
  border-color: #004494;
}

.custom-row {
  display: flex;
  flex-wrap: wrap;
  height: 900px; /* 设置el-row的高度，确保这是一个固定值或者继承自父元素 */

}

.custom-col {
  height: 100%; /* 让el-col继承el-row的高度 */
  /* 确保el-col内的内容不会超出其高度 */
  overflow: auto; /* 或者使用auto，如果需要滚动条 */
}

.infinite-list-wrapper {
  height: 100%;
  overflow: auto;
}

</style>
